import React from 'react';
import { Alert, Modal } from 'antd';
import styles from './index.less';
import type { ConfirmProps } from '@/components/CustomElement/CustomModal/interface';
// 自定义弹窗
const Confirm: React.FC<ConfirmProps> = (props) => {
    const {
        title,
        modalVisible = false,
        children,
        footerButton,
        destroyOnClose = false,
        keyboard = false,
        maskClosable = false,
        width = 520,
        footerPosition = 'right',
        alertProps,
        onCancel,
    } = props;

    const defaultAlertProps = {
        show: true,
        closable: false,
        showIcon: true,
        inherit: true,
        type: 'warning' as 'success' | 'info' | 'warning' | 'error',
        ...alertProps,
    };

    const footerFlex = {
        left: {
            display: 'flex',
            justifyContent: 'flex-start',
        },
        center: {
            display: 'flex',
            justifyContent: 'center',
        },
        right: {
            display: 'flex',
            justifyContent: 'flex-end',
        },
    };

    const inheritStyle = {
        border: 'inherit',
        background: 'inherit',
        color: 'inherit',
    };

    return (
        <Modal
            title={title}
            visible={modalVisible}
            footer={null}
            destroyOnClose={destroyOnClose}
            keyboard={keyboard}
            maskClosable={maskClosable}
            width={width}
            onCancel={onCancel}
        >
            <div className={styles.modal_content}>
                {defaultAlertProps?.show && (
                    <Alert
                        {...defaultAlertProps}
                        style={defaultAlertProps?.inherit ? { ...inheritStyle } : {}}
                    />
                )}
                <div className={defaultAlertProps?.show && styles.modal_content_word}>
                    {children}
                </div>
            </div>
            <div className={styles.footerBottom} style={{ ...footerFlex[footerPosition] }}>
                {footerButton}
            </div>
        </Modal>
    );
};

export default {
    Confirm,
};
